////
/// Components
/// Navigation
////

.Navigation {
  padding: get-spacing(tight);

  @media screen and (min-width: get-breakpoint()) {
    flex: 1; // for sticky footer
  }

  @media screen and (min-width: get-breakpoint(desktop)) {
    padding-right: get-spacing(loose);
    padding-left: get-spacing(loose);
  }
}

.NavList {
  & + & {
    margin-top: get-spacing();

    @media screen and (min-width: get-breakpoint()) {
      margin-top: get-spacing(looser);
    }
  }
}

.NavItem {
  & + & {
    margin-top: get-spacing(tightest) + $spacing-unit;

    @media screen and (min-width: get-breakpoint()) {
      margin-top: get-spacing(tighter);
    }
  }
}

.NavHeading,
.NavLink {
  font-size: get-type-scale(nav);
  letter-spacing: get-type-scale(nav, tracking);
  line-height: get-type-scale(nav, leading);

  @media screen and (min-width: get-breakpoint()) {
    font-size: get-type-scale(nav, '960');
  }
}

.NavHeading {
  font-weight: get-type-scale(h1, weight);
  color: white;

  .NavList--isCurrent & {
    color: get-color(brand, yellow);
  }
}

// Use .Link class?
.NavLink {
  font-weight: get-type-scale(subheading, weight);
  color: get-color(coal, light);

  &.NavLink--isCurrent {
    pointer-events: none;
    color: get-color(purple);
  }

  &.NavLink--isDisabled {
    pointer-events: none;
    color: get-color(coal, light);
  }
}

a.NavLink {
  color: get-color(ash, dark);
  transition: color get-duration() get-easing();

  &:focus,
  &:hover {
    color: get-color(purple);
  }

  &:active {
    color: get-color(purple, dark);
  }
}
